<template>
  <el-drawer
    v-model="drawer"
    :title="row.title == 'addUser' ? '添加成员' : '编辑成员'"
    v-if="row"
    :direction="'rtl'"
    destroy-on-close
  >
    <zc-form v-bind="config()" :request="request"></zc-form>
  </el-drawer>
</template>

<script setup lang="ts">
import { formConfig } from "@/config/formConfig";
import mittBus from "@/utils/mittBus";
import { addUser, modifyPersonnel } from "@/api/department";
import { ComponentInternalInstance } from "vue";
const drawer = ref(false);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const row = ref();
mittBus.on("openUserDrawer", (props: any) => {
  drawer.value = true;
  row.value = props;
  console.log("....", props);
});

const config = () => {
  return formConfig({
    labelWidth: "80px",
    formItems: [
      {
        prop: "name",
        label: "姓名",
        type: "input",
        maxlength: 20,
        value: row.value?.name,
        rules: [{ required: true, message: "请输入用户名称" }],
        otherOptions: {
          placeholder: "请输入用户名称",
        },
      },
      {
        prop: "department",
        label: "部门",
        type: "input",
        value: row.value?.department,
        maxlength: 20,
        rules: [{ required: true, message: "请输入用户名称" }],
        otherOptions: {
          placeholder: "请输入部门",
          disabled: true,
        },
      },
      {
        prop: "userName",
        label: "手机号",
        maxlength: 11,
        type: "number",
        value: row.value?.userName,
        rules: [{ required: true, message: "请输入用户名称" }],
        otherOptions: {
          placeholder: "请输入手机号",
          disabled: row.value.title == "addUser" ? false : true,
        },
      },
      {
        prop: "passWord",
        label: "登录密码",
        maxlength: 11,
        type: "password",
        otherOptions: {
          placeholder: "请输入登录密码",
        },
        toolTip: "设置为默认密码",
      },
    ],
  });
};

const fn = (str: string) => {
  proxy?.$message.success(str);
  row.value?.tableRef.reload();
  drawer.value = false;
};

const request = async (props: any) => {
  if (row.value?.title == "addUser") {
    const res = await addUser(props);
    if (res.errno == 0 || res.errno == 200) {
      fn("添加成员成功");
    }
  } else {
    const res = await modifyPersonnel(props);
    if (res.code == 200 || res.errno == 200) {
      fn("修改成员成功");
    }
  }
};
</script>

<style scoped lang="scss"></style>
